<template>
    <div>
        <el-card class="!border-none" shadow="never">
			
			
            <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
                <el-form-item label="优惠卷名称">
                    <el-input
                            class="w-[280px]"
                            v-model="queryParams.name"
                            placeholder="请输入优惠卷名称"
                            clearable
                            @keyup.enter="resetPage"
                    />
                </el-form-item>
                <el-form-item label="优惠卷状态">
                    <el-select class="w-[200px]" v-model="queryParams.status" clearable>
                        <template v-for="item in coupon_state">
                            <el-option :value="item.id" :label="item.name">{{item.name}}</el-option>
                        </template>
                    </el-select>
                </el-form-item>
               <el-form-item label="券类型">
                   <el-select class="w-[200px]" v-model="queryParams.is_reg" clearable>
                       <template v-for="item in gradeList">
                           <el-option :value="item.id" :label="item.name">{{item.name}}</el-option>
                       </template>
                   </el-select>
               </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetPage">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="!border-none mt-4" shadow="never">
			<div class="flex justify-end">
				<el-button class="mb-4"  type="primary" @click="handleAdd">
				     新增优惠券
				 </el-button>
			</div>
            <el-tabs class="demo-tabs">
                <el-table size="large" v-loading="pager.loading" :data="pager.lists" style="width: 100%">
                    <el-table-column label="优惠券名称" prop="name" min-width="180" />
                    <el-table-column label="券额" prop="price"  min-width="100" />
                       
                    <el-table-column label="所属分类" prop="cate_info"  min-width="170" />
                    <el-table-column label="满多少可用" prop="full_price"  min-width="150" />
                    <el-table-column label="有效期/天" prop="day"  min-width="100" />
					<el-table-column label="限领数量(0不限制)" prop="limited"  min-width="150" />
                    <el-table-column label="状态" prop="name"  min-width="150">
						<template #default="{ row }">
						    <el-switch
						        v-model="row.status"
						        :active-value="1"
						        :inactive-value="0"
						        @click="handleChange(row)"
						    />
						</template>
                    </el-table-column>
				   <el-table-column label="券类型" prop="reg"  min-width="100" />
				   <el-table-column label="描述" prop="remark"  min-width="150" />
				   <el-table-column label="创建时间" prop="created_at"  min-width="180" />
                    <el-table-column label="操作面板" min-width="160" fixed="right">
                        <template #default="{ row }">
                            <el-button type="primary"  @click="editRoom(row)">
                                编辑
                            </el-button>
                        </template>

                    </el-table-column>
                </el-table>
                <div class="flex justify-end mt-4">
                    <pagination v-model="pager" @change="getLists" />
                </div>
            </el-tabs>
        </el-card>
		<editPopup @success="getLists" v-if="showedit" ref="editRef" />
    </div>
</template>
<script lang="ts" setup>
    import { stateCoupon, couponList,couponType } from '@/api/consumer'
    import { usePaging } from '@/hooks/usePaging'
    import router, { getRoutePath } from '@/router'
	import editPopup from './edit.vue'
    const coupon_state = [
		{
		    id: 0,
		    name: '已禁用'
		},
        {
            id: 1,
            name: '正常'
        },
    ];

    const queryParams = reactive({
        uuid: '',
        user_keyword: '',
        name: '',
        status: '',
        start_time: '',
        end_time: '',
		is_reg:''
    });

    const { pager, getLists, resetPage, resetParams } = usePaging({
        fetchFun: couponList,
        params: queryParams
    });

    getLists();
	
	const gradeList = ref([]);
	couponType({}).then((res) => {
	    gradeList.value = res.list.map((_res: any) => {
	        return {id: _res.id, name: _res.name}
	    })
	});
	
	//改变状态
	const handleChange = async (params: any) => {
		params.status =params.status
		params.coupon_id = params.id
	    await stateCoupon(params)
		getLists();
	}
   
   // 编辑
   const editRef = shallowRef<InstanceType<typeof EditPopup>>();
   const showedit = ref(false);
   
   // 编辑优惠券
   const editRoom = async (data: any) => {
       showedit.value = true;
       await nextTick()
       editRef.value?.open('edit')
       editRef.value?.getDetail(data)
   };
	const handleAdd = async () => {
	    showedit.value = true
	    await nextTick()
	    editRef.value?.open('add')
	}
	
</script>
